<template>
  <div class="YoyAnalysisbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="光伏系统">
                  <FilterSelect2
                      v-model="companyId"
                      :optionlist="xitonglist"
                      @updateModelValue="changexitong"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="display:flex;margin-top: 4px;">
                <el-radio-group v-model="radio3" size="small" style="margin-right:20px ;">
                  <el-radio-button label="1">日</el-radio-button>
                  <el-radio-button label="2">月</el-radio-button>
                </el-radio-group>
                <el-date-picker v-if="radio3=='1'" v-model="value1" type="daterange" range-separator="-" start-placeholder="开始日期"
                  end-placeholder="结束日期" value-format="yyyy-MM-dd" size="small" style="flex:1;">
                </el-date-picker>
                <el-date-picker v-else v-model="value2" type="monthrange" range-separator="-" start-placeholder="开始月份"
                  end-placeholder="结束月份" value-format="yyyy-MM" size="small" style="flex:1;">
                </el-date-picker>
              </el-col>
              <el-col :span="13" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button size="small" type="primary" @click="gettablelist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      <!-- <div>
        <span class="text">光伏系统</span>
        <span>
          <el-select size="small" v-model="companyId" @change="changexitong">
            <el-option v-for="(item,index) in xitonglist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
          </el-select>
        </span>
        <span>
          <el-radio-group v-model="radio3" size="small">
            <el-radio-button label="1">日</el-radio-button>
            <el-radio-button label="2">月</el-radio-button>
          </el-radio-group>
        </span>
        <span>
          <el-date-picker v-if="radio3=='1'" v-model="value1" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" size="small">
          </el-date-picker>
          <el-date-picker v-else v-model="value2" type="monthrange" range-separator="-" start-placeholder="开始月份"
            end-placeholder="结束月份" value-format="yyyy-MM" size="small">
          </el-date-picker>
        </span>
      </div>
      <div>
        <button class="button" @click="chongzhi">重置</button>
        <button class="button sure" @click="gettablelist">查询</button>
      </div> -->
    </div>
    <div class="bodybox">
      <div class="title">
        <div>同比分析</div>
        <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
      </div>
      <div class="echandtab">
        <div class="tongbiech" ref="tongbiech"></div>
        <div class="tongbiech" >
          <el-table
            :data="tableData"
            :size="issize"
            border
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            v-loading="loading"
            height="calc(100% - 1px)"
            style="width: 100%">
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column
              prop="dateTime"
              label="日期"
              align="center">
            </el-table-column>
            <el-table-column label="电量(kWh)">
              <el-table-column
                prop="currentQuantity"
                label="本期">
              </el-table-column>
              <el-table-column
                prop="lastMonthQuantity"
                label="上月同期">
              </el-table-column>
              <el-table-column
                prop="lastYearQuantity"
                label="去年同期">
              </el-table-column>
            </el-table-column>
            <el-table-column
                prop="ratio"
                label="环比(%)">
              </el-table-column>
              <el-table-column
                prop="yearOnYear"
                label="同比(%)">
              </el-table-column>
            <el-table-column label="最大负荷(kWh)">
              <el-table-column
                prop="currentMaxLoad"
                label="本期">
              </el-table-column>
              <el-table-column
                prop="lastMonthMaxLoad"
                label="上月同期">
              </el-table-column>
              <el-table-column
                prop="lastYearMaxLoad"
                label="去年同期">
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import {gettogbiquxianapi,gettongbitableapi,getphotovollistapi} from '@/api/Photovoltaic/analysis/YoyAnalysis'
export default {
  name: 'CallPoliceYoyAnalysis',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      loading: false,
      issize: 'medium',
      value1: [],
      value2:[],
      radio3:'1',
      companyId:'100002011',
      xitonglist: [],
      tableData:[]
    };
  },

  async mounted() {
    const { data: { list } } = await getphotovollistapi()
    this.xitonglist = list
    const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
    this.$set(this,'companyId',PhotoCompanyId?+PhotoCompanyId:list[0].id)
    this.gettime()
    this.gettablelist()
  },

  methods: {
    // 查询按钮
    async gettablelist() {
      this.loading=true
      const { data: { list } } = await gettongbitableapi({
        companyId: this.companyId,endDate:this.radio3=='1'?this.value1[1]:this.value2[1],
        startDate:this.radio3=='1'?this.value1[0]:this.value2[0], dateType: this.radio3,
      })
      this.tableData=list
      this.loading=false
      this.gettongbiechart()
    },
    // 系统下拉存本地
    changexitong(val) {
      localStorage.setItem('PhotoCompanyId', val)
    },
    // 获取负荷电量图表
    async gettongbiechart() {
      var chartDom = this.$refs.tongbiech
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const { data: { list } } = await gettogbiquxianapi({
        companyId: this.companyId,endDate:this.radio3=='1'?this.value1[1]:this.value2[1],
        startDate:this.radio3=='1'?this.value1[0]:this.value2[0], dateType: this.radio3,
      })
      const timePoints =[]
      for (let i = 0; i < list.length; i++) {
          if (list[i].datalist.length > 0) {
              list[i].datalist.forEach(data => {
                timePoints.push(data.timeReading);
              });
              break;
          }
      }
      option = {
        color:['#5291ff','#9999ff','#52ffff','#2ee699','#ff9966','#ffcc66'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          top: '8%',
          containLabel: true
        },
        legend: { },
        xAxis: [
          {
            type: 'category',
            data: timePoints,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(kWh)',
          },
          {
            type: 'value',
            name: '负荷(kW)',
          }
        ],
        series: [
          {
            name: '本期电量',
            type: 'bar',
            data: list.filter(ele=>ele.name=='本期电量')[0].datalist.map(ele=>ele.valueReading)
          },
          {
            name: '上月同期电量',
            type: 'bar',
            data: list.filter(ele=>ele.name=='上月同期电量')[0].datalist.map(ele=>ele.valueReading)
          },
          {
            name: '去年同期电量',
            type: 'bar',
            data: list.filter(ele=>ele.name=='去年同期电量')[0].datalist.map(ele=>ele.valueReading)
          },
          {
            name: '本期负荷',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: list.filter(ele=>ele.name=='本期负荷')[0].datalist.map(ele=>ele.valueReading)
          },
          {
            name: '上月同期负荷',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: list.filter(ele=>ele.name=='上月同期负荷')[0].datalist.map(ele=>ele.valueReading)
          },
          {
            name: '去年同期负荷',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: list.filter(ele=>ele.name=='去年同期负荷')[0].datalist.map(ele=>ele.valueReading)
          },
        ]
      };

      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    // 重置
    chongzhi() {
      const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
      this.$set(this, 'companyId', PhotoCompanyId ? +PhotoCompanyId : this.xitonglist[0].id)
      this.radio3='1'
      this.gettime()
      this.gettablelist()
    },
     // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('pes-microservice-biz/pvm/tb/analyse/export',{
        companyId: this.companyId,endDate:this.radio3=='1'?this.value1[1]:this.value2[1],
        startDate:this.radio3=='1'?this.value1[0]:this.value2[0], dateType: this.radio3,
      },'同比分析')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.value1=[]
      this.value2 = []
      this.value1.push(year+'-'+month+'-'+'01')
      this.value1.push(year + '-' + month + '-' + day)
      this.value2.push(year+'-'+'01')
      this.value2.push(year + '-' + month)
      // this.$set(this.form,'createDate',year+'-'+month+'-'+day+' 00'+':'+'00'+':'+'00')
    },
  },
};
</script>

<style scoped>
.YoyAnalysisbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .title{
      margin-bottom: 10px;
      display:flex;
      justify-content:space-between;
    }
    .echandtab{
      height: 95%;
      .tongbiech{
        height: 50%;
      }
    }
  }
}
</style>